<template>
  <div class="container">
    <ObjModel
      v-if="modelType === EnumObjectType.obj"
      :obj-src="objSrc"
      :mtl-src="mtlSrc"
      :files="fileArr"
    />
    <FbxModel
      v-if="modelType === EnumObjectType.fbx"
      :fbx-src="fbxSrc"
    ></FbxModel>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'
import useUnZip from '@/hooks/useJsZip'
import { EnumObjectType, getObjectType } from '@/utils'
import ObjModel from '@/components/ObjModel/index.vue'
import FbxModel from '@/components/FbxModel/index.vue'
import { ElMessage } from 'element-plus'

const modelType = ref<EnumObjectType | undefined>(undefined)

const objSrc = ref('')
const mtlSrc = ref('')
const fbxSrc = ref('')
const fileArr = ref<
  {
    name: string
    url: string
    size: number
  }[]
>([])

const { loadFile } = useUnZip()
onMounted(async () => {
  // window.addEventListener('message', async function (e) {
  //   if (e.data.type === 'setZipUrl') {
  //     loadZip(e.data.data)
  //   }
  // })
  loadZip('')
})
onBeforeUnmount(() => {
  clear()
})

const clear = () => {
  if (modelType.value === EnumObjectType.obj) {
    objSrc.value = ''
    mtlSrc.value = ''
  } else {
    fbxSrc.value = ''
  }
  fileArr.value.forEach((e) => {
    if (e.url) {
      URL.revokeObjectURL(e.url)
    }
  })
  fileArr.value = []
}

const loadZip = async (zipSrc: string) => {
  clear()
  console.log(zipSrc)
  const files = await loadFile('/api/3-浏览级4k.zip')
  // const files = await loadFile('/api/max导出.rar')
  // loadFile('/api/maya导出.rar')
  // const files = await loadFile('/api/23-HT173-0361-清仿哥窑瓷盘.zip')
  // const files = await loadFile('/api/4-线上模型.zip')
  // const files = await loadFile('/api/max导出.zip')
  // console.log(files)
  // console.time()
  // const files = await loadFile(
  //   'http://10.168.1.158:9000/hda-dam/host/other/2024/0927/197ad641609245d8b422333cd0b41d26?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20240927%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240927T075923Z&X-Amz-Expires=7200&X-Amz-SignedHeaders=host&response-content-disposition=attachment%3B%20filename%3D%22max%E5%AF%BC%E5%87%BA.zip%22&response-content-type=application%2Foctet-stream&X-Amz-Signature=49c310dc2f7275a85181d2e0d167b535a463f862309afcea2e37500014a6e519',
  // )
  // console.timeEnd()
  // console.log(files)
  // console.log(Object.keys(files).length)
  // loadFile('/api/西周何尊1-存储模型.zip')
  // const files = await loadFile('/api/西周何尊3-线下模型.zip')
  // const files = await loadFile('/api/西周何尊4-线上模型.zip')
  // loadFile('/api/西周何尊点云.zip')
  // const files = await loadFile('/api/西周何尊浏览级4k.zip')
  // const files = await loadFile(zipSrc)
  // const files = await loadFile('/api/Z223-西汉鼓腹环耳索纹铜鍪.zip')
  // const files = await loadFile('/api/obj.zip')

  // 判断压缩包内文件的模型类型
  for (const key in files) {
    if (!files[key].dir) {
      const blob = await files[key].async('blob')
      const url = URL.createObjectURL(blob)
      fileArr.value.push({
        name: files[key].name,
        url,
        size: blob.size,
      })
    }
  }
  modelType.value = getObjectType(
    fileArr.value.map((e) => e.name.split('.').pop()!),
  )
  if (!modelType.value) {
    window.parent.postMessage(
      {
        type: 'unknown',
        message: '无法识别模型类型',
      },
      '*',
    )
    return ElMessage.warning('无法识别模型类型')
  }
  if (modelType.value === EnumObjectType.obj) {
    const objFile = fileArr.value
      // 有效到达排序，优先展示小模型
      .sort((a, b) => a.size - b.size)
      .find((e) => e.name.split('.').pop() === EnumObjectType.obj)
    const mtlFile = fileArr.value.find((e) => e.name.split('.').pop() === 'mtl')
    objSrc.value = objFile?.url || ''
    mtlSrc.value = mtlFile?.url || ''
  } else {
    const fbxFile = fileArr.value
      // 有效到达排序，优先展示小模型
      .sort((a, b) => a.size - b.size)
      .find((e) => e.name.split('.').pop() === EnumObjectType.fbx)
    // const mtlFile = fileArr.value.find((e) => e.name.split('.').pop() === 'mtl')
    fbxSrc.value = fbxFile?.url || ''
    // mtlSrc.value = mtlFile?.url || ''
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: url('@/assets/background.jpg') no-repeat center center;
  background-size: cover;
}
</style>
